import { ProCard } from '@ant-design/pro-components';
import RcResizeObserver from 'rc-resize-observer';
import { useState } from 'react';
import { Image } from 'antd';
import DoodleInfo from '../../components/DoodleFormInfo/index';

export default () => {
    const [responsive, setResponsive] = useState(false);
    return (
        <RcResizeObserver
            key="resize-observer"
            onResize={(offset) => {
                setResponsive(offset.width < 596);
            }}
        >
            <ProCard
                title="图片添加标注"
                extra="2019年9月28日"
                split={responsive ? 'horizontal' : 'vertical'}
                bordered
                headerBordered
            >
                <ProCard title="图片详情" colSpan="50%">
                    <div style={{ height: 360 }}>
                        <Image
                            width={300}
                            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                        />
                    </div>
                </ProCard>
                <ProCard title="标注信息填写">
                    <div style={{ height: 360 }}>
                        <DoodleInfo />
                    </div>
                </ProCard>
            </ProCard>
        </RcResizeObserver>
    );
};